<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <title>layui</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <link rel="stylesheet" href="/plugins/layui/css/layui.css" media="all">
    <!--ztree-->
    <link rel="stylesheet" href="/plugins/zTree/css/demo.css" type="text/css">
    <link rel="stylesheet" href="/plugins/zTree/css/zTreeStyle/zTreeStyle.css" type="text/css">


    <style>
        body {
            padding: 16px;
        }

        div.content_wrap {
            width: 260px;
        }

        .zTreeDemoBackground {
            width: 260px;
        }

        ul.ztree {
            background-color: #FFF;
            border: none;
            height: 500px;
        }
    </style>


</HEAD>
<body>
<div style="width:260px; display: inline-block;float: left">
    <fieldset class="layui-elem-field layui-field-title" style="margin-top: 20px;">
        <legend>菜单信息</legend>
    </fieldset>
    <div class="content_wrap">
        <div class="zTreeDemoBackground">
            <ul id="treeDemo" class="ztree"></ul>
        </div>
    </div>
</div>
<div style="display: inline-block; width:500px;">

    <fieldset class="layui-elem-field layui-field-title" style="margin-top: 20px;">
        <legend>角色信息</legend>
    </fieldset>

    <form id="app" class="layui-form" action="">
        <div class="layui-form-item">
            <label class="layui-form-label">角色名称</label>
            <div class="layui-input-block">
                <input name="name" type="text" autocomplete="off"
                       class="layui-input" :value="obj.name">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">角色标识</label>
            <div class="layui-input-block">
                <input name="roleType" type="text" autocomplete="off"
                       class="layui-input" :value="obj.roleType">
            </div>
        </div>
        <div class="layui-form-item layui-form-text">
            <label class="layui-form-label">描述</label>
            <div class="layui-input-block">
                <textarea name="description" placeholder="请输入内容" class="layui-textarea">{{obj.description}}</textarea>
            </div>
        </div>
        <div class="layui-form-item layui-form-text" style="display: none">
            <label class="layui-form-label">meunIds</label>
            <div class="layui-input-block">
                <input name="meunIds[]" type="text" autocomplete="off"
                       class="layui-input" :value="meunIds">
            </div>
        </div>

        <div class="layui-form-item">
            <div class="layui-input-block">
                <button class="layui-btn" lay-submit="" lay-filter="demo1">立即提交</button>
                <button type="reset" class="layui-btn layui-btn-primary">重置</button>
            </div>
        </div>
    </form>
</div>

<input id="json" type="text" style="display: none" value="{}">
<!--tree-->
<script src="/plugins/jQuery/jquery-2.2.3.min.js"></script>
<script type="text/javascript" src="/plugins/zTree/js/jquery.ztree.core.js"></script>
<script type="text/javascript" src="/plugins/zTree/js/jquery.ztree.excheck.js"></script>
<!--表单组件-->
<script src="/plugins/vue/vue.min.js"></script>
<script src="/plugins/layui/layui.js"></script>
<script src="/plugins/jqueryForm/jquery.form.min.js"></script>
<script src="/dist/js/zTree_menu.js"></script>
<script src="/dist/js/config.js"></script>
<script src="/dist/js/pages/role_frame_page.js">
</script>

</body>
</html>